<script>
import App from './app';
import BaseModule from './base/BaseModule';
import * as utils from '@/utils/helps.js';
/*
 * 地图模板
 */
export default {
  name: 'MapViewer',
  mixins: [BaseModule],
  props: {
    //地图选项
    options: {
      type: Object,
      default() {
        return {
          mode: 'view',
          data: [],
          info: {},
          settings: {},
        };
      },
    },
  },
  data() {
    return {
      geoStrokeColor: '#00ffff',
      geoStrokeOpacity: 1,
      geoLayer: 'geoLayer',
    };
  },
  computed: {},
  beforeCreate() {
    if (this.$store.state.map) {
      this.$store.unregisterModule('map');
    }
  },
  mounted() {
    App.initApp({ map: this.$refs.map, options: this.options });
  },
  methods: {},
};
</script>
<template>
  <div class="map-viewer-wrapper">
    <BaseMap
      ref="map">
      <NavControl></NavControl>
      <TileWMSLayer></TileWMSLayer>
      <GeoJson
        :id="geoLayer"
        :color="geoStrokeColor"
        :opacity="geoStrokeOpacity">
      </GeoJson>
    </BaseMap>
  </div>
</template>

<style lang="less">
.map-viewer-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>
